<template>
  <div class="add-menu-container">
    <el-form
      ref="menuRef"
      :model="menuForm"
      :rules="menuRule"
      :inline="true"
      size="mini"
      label-position="top"
    >
      <el-form-item label="菜单标题" prop="title">
        <el-input v-model="menuForm.title" v-trim autocomplete="off" />
      </el-form-item>
      <el-form-item label="菜单名称" prop="menuName">
        <el-input v-model="menuForm.menuName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="父级菜单" prop="pid">
        <el-cascader v-model="menuForm.pid" :options="menus" :props="menuProps" clearable :show-all-levels="true" />
      </el-form-item>
      <el-form-item label="菜单类型" prop="menuType">
        <el-select v-model="menuForm.menuType" placeholder="请选择菜单类型">
          <el-option label="菜单" :value="1" />
          <el-option label="按钮" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input v-model.number="menuForm.sort" autocomplete="off" maxlength="11" />
      </el-form-item>
      <br>
      <el-form-item label="父级路由(路由出口)">
        <el-cascader v-model="menuForm.proute" :options="vueRoutes" :props="vueRouteProps" clearable :show-all-levels="true" />
      </el-form-item>
      <el-form-item label="vueRouter路由对象命名">
        <el-input v-model="menuForm.routeName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="路由路径">
        <el-input v-model="menuForm.routePath" autocomplete="off" />
      </el-form-item>
      <el-form-item label="icon">
        <el-input v-model="menuForm.icon" autocomplete="off" />
      </el-form-item>
      <el-form-item label="是否显示">
        <el-select v-model="menuForm.status" placeholder="默认为显示">
          <el-option label="显示" :value="1" />
          <el-option label="隐藏" :value="0" />
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="resetForm('menuRef')">重 置</el-button>
      <el-button type="primary" @click="saveMenu">确 定</el-button>
    </div>
  </div>
</template>

<script>
import { addMenu, getMenus, getVueRoutes } from '@/api/menu'
export default {
  name: 'AddMenu',
  components: {},
  props: {},
  data () {
    return {
      menus: [],
      menuProps: {
        checkStrictly: true,
        label: 'title',
        value: 'id',
        disabled: 'disabled',
        emitPath: false
      },
      vueRoutes: [],
      vueRouteProps: {
        checkStrictly: true,
        label: 'route_name',
        value: 'id',
        disabled: 'disabled',
        emitPath: false
      },
      menuForm: {
        title: '',
        menuName: '',
        pid: 1,
        proute: null,
        menuType: 1,
        sort: null,
        routeName: '',
        routePath: '',
        icon: '',
        status: 1
      },
      menuRule: {
        title: [
          { required: true, message: '请输入菜单标题', trigger: 'blur' },
          { min: 2, max: 25, message: '长度在 2 到 25 个字符', trigger: 'blur' }
        ],
        menuName: [
          { required: true, message: '请输入菜单名称', trigger: 'blur' },
          { min: 2, max: 25, message: '长度在 2 到 25 个字符', trigger: 'blur' }
        ],
        pid: [
          { required: true, message: '请选择父级菜单', trigger: 'blur' }
        ],
        menuType: [
          { required: true, message: '请选择菜单类型', trigger: 'blur' }
        ],
        sort: [
          { required: true, message: '请选择排序', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {},
  watch: {},
  created () {
    this.getMenus()
    this.getVueRoutes()
  },
  mounted () {},
  methods: {
    // 获取所有菜单
    getMenus: async function () {
      const res = await getMenus()
      this.menus = res
    },
    getVueRoutes: async function () {
      const res = await getVueRoutes()
      this.vueRoutes = res
    },
    // 保存菜单
    saveMenu: async function () {
      const validate = await this.$refs.menuRef.validate().then(() => { return true }).catch(() => { return false })
      if (validate) {
        const res = await addMenu(this.menuForm)
        if (res) {
          this.$message({ message: '添加成功', type: 'success', duration: 1000 })
          this.$emit('reset-menus')
        }
      }
    },
    resetForm(refName) {
      this.$refs[refName].resetFields()
    }
  }
}
</script>

<style scoped lang="scss">
.add-menu-container {
  color: var(--main-color);
  background-color: var(--main-bg-color);
  border-color: var(--main-bg-color);
  .el-form {
    .el-form-item {
      width: 28%;
      margin-right: 4%;
    }
  }
}
</style>
